<template>
    <div class="contourLinesBox">
        <!-- 等高线 -->
        <div class="closeBox">
            <i class="el-icon-close" title="关闭" @click="closeBoxs"></i>
        </div>
        <el-form label-width="80px" :model="contourLine">
            <el-form-item label="限定区域">
                <el-button type="primary" @click="btnDrawExtent">添加矩形</el-button>
                <el-button type="primary" @click="btnDraw">添加多边形</el-button>
                <el-button type="primary" @click="clearWJ">清除</el-button>
            </el-form-item>
            <el-form-item label="等高线">
                <div class="adjustmentBox">
                    <el-checkbox v-model="contourLine.contourShow">显示</el-checkbox>
                    <!-- <input type="text" id="txtColor" class="form-control" style="width: 100px" value="#FF0000" /> -->
                    <colorPicker class="colorSelector" :defaultColor="contourLine.color" v-model="contourLine.color" />
                    <span class="colorValue">{{ contourLine.color }}</span>
                </div>
                <div class="adjustmentBox">间隔<el-slider class="slide" v-model="contourLine.spacing" :min="5" :max="500" :step="1"></el-slider><span>米</span></div>
                <div class="adjustmentBox">线宽<el-slider class="slide" v-model="contourLine.width" :min="1" :max="10" :step="0.1"></el-slider><span>px</span></div>
            </el-form-item>
            <el-form-item label="地表渲染">
                <el-radio-group v-model="contourLine.shadingType">
                    <el-radio label="none">无阴影</el-radio>
                    <el-radio label="elevation">高程</el-radio>
                    <el-radio label="slope">坡度</el-radio>
                    <el-radio label="aspect">坡向</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="状态控制">
                <el-checkbox v-model="contourLine.showElseArea">显示其他区域</el-checkbox>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" align="center">
            <el-table-column prop="name" label="区域" align="center"> </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div class="operationIcon">
                        <i class="fa fa-paper-plane-o" title="飞行定位到区域" @click="flyTos(scope.row.id)"></i>
                        <i class="el-icon-delete" title="删除区域" @click="remove(scope.row.id)"></i>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { initMap, Mars3d } from '../../utils/initMap'
export default {
    data() {
        return {
            tableData: [],
            contourLine: {
                contourShow: true, //是否显示等高线
                spacing: 100, //等高线 间隔（单位：米）
                width: 1, //等高线 线宽（单位：像素）
                color: '#FF0000', //等高线 颜色
                shadingType: 'none', //地表渲染效果，可选值: 无nono, 高程 elevation, 坡度slope, 坡向aspect
                showElseArea: true //是否显示区域外的地图
            }
        }
    },
    watch: {
        'contourLine.contourShow'(newVal) {
            contourLine.contourShow = newVal
        },
        'contourLine.spacing'(newVal) {
            contourLine.spacing = newVal
        },
        'contourLine.width'(newVal) {
            contourLine.width = newVal
        },
        'contourLine.color'(newVal) {
            contourLine.color = Mars3d.Cesium.Color.fromCssColorString(newVal)
        },
        'contourLine.shadingType'(newVal) {
            contourLine.shadingType = newVal
        },
        'contourLine.showElseArea'(newVal) {
            contourLine.showElseArea = newVal
        }
    },
    mounted() {
        // setTimeout(() => {
        //     // contourLine.addArea([
        //     //     [116.003125, 30.948354, 1103.66],
        //     //     [116.23964, 30.946376, 563.02],
        //     //     [116.223677, 30.802558, 522.04],
        //     //     [115.997891, 30.807484, 440.83]
        //     // ])
        //     //     let tileLayer111 = new mars3d.layer.XyzLayer({
        //     //         url: 'http://192.168.0.102/{z}/{x}/{y}.png',
        //     //         minimumLevel: 9,
        //     //         maximumLevel: 18,
        //     //         rectangle: { xmin: 106.77140742, xmax: 106.77183691, ymin: 29.8937826, ymax: 29.89415684 },
        //     //         opacity: 1
        //     //         // flyTo: true
        //     //     })
        //     //     map.addLayer(tileLayer111)
        // }, 300)
    },
    methods: {
        closeBoxs() {
            this.$emit('ContourLiness', false)
        },
        btnDrawExtent() {
            // 添加矩形
            let that = this
            map.graphicLayer.startDraw({
                type: 'rectangle',
                style: {
                    color: '#007be6',
                    opacity: 0.5,
                    outline: false
                },
                success: function(graphic) {
                    //绘制成功后回调
                    var positions = graphic.getOutlinePositions(false)
                    map.graphicLayer.clear()
                    let areaItem = contourLine.addArea(positions)
                    that.addTableItem(areaItem)
                }
            })
        },
        btnDraw() {
            // 添加多边形
            let that = this
            map.graphicLayer.startDraw({
                type: 'polygon',
                style: {
                    color: '#007be6',
                    opacity: 0.5,
                    outline: false
                },
                success: function(graphic) {
                    //绘制成功后回调
                    var positions = graphic.positionsShow
                    map.graphicLayer.clear()

                    // console.log(JSON.stringify(mars3d.PointTrans.cartesians2lonlats(positions))) //打印下边界

                    let areaItem = contourLine.addArea(positions)
                    that.addTableItem(areaItem)
                }
            })
        },
        clearWJ() {
            // 清除
            contourLine.clear()
            this.tableData = []
        },
        addTableItem(item) {
            let tableData = {
                name: `区域${item.id}`,
                id: item.id
            }
            this.tableData.push(tableData)
        },
        // 表格操作
        flyTos(id) {
            // 飞图
            let item = contourLine.getAreaById(id)
            map.flyToPositions(item.positions)
        },
        remove(id) {
            // 删除
            let item = contourLine.getAreaById(id)
            contourLine.removeArea(item)
            this.tableData.forEach((v, i) => {
                if (v.id == id) {
                    this.tableData.splice(i, 1)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.contourLinesBox {
    position: fixed;
    width: 425px;
    padding: 10px 15px;
    border-radius: 4px;
    background: rgba(30, 36, 50, 0.6);
    border: 1px solid rgba(32, 160, 255, 0.3);
    color: #ffffff;
    z-index: 2000;
    right: 10px;
    top: 48px;
    .closeBox {
        text-align: right;
        margin-bottom: 10px;
        i {
            cursor: pointer;
        }
    }
    .adjustmentBox {
        display: flex;
        align-items: center;
        .slide {
            width: 150px;
            margin: 0 50px;
        }
        .colorSelector {
            margin-left: 20px;
            cursor: pointer;
        }
        .colorValue {
            margin-left: 30px;
        }
    }
    .operationIcon {
        font-size: 14px;
        i {
            cursor: pointer;
            margin-left: 10px;
        }
    }
}
</style>
<style>
.contourLinesBox .el-form > .el-form-item > .el-form-item__label,
.contourLinesBox > .el-form .el-form-item .el-checkbox,
.contourLinesBox > .el-form .el-form-item .el-radio {
    color: #ffffff !important;
}
.contourLinesBox > .el-table,
.contourLinesBox > .el-table__expanded-cell,
.contourLinesBox > .el-table th,
.contourLinesBox > .el-table tr,
.contourLinesBox > .el-table td {
    background-color: transparent !important;
    color: #ffffff !important;
}
.contourLinesBox > .el-table--border {
    border: 1px solid #ffffff;
}
.contourLinesBox > .el-table::before {
    height: 0px;
}
</style>
